﻿
(function () {
    var dataChecker = (function (){
        var isNumber = function (value){
            return /^[1-9]\d*$/.test(value);
        };

        var isNotEmpty = function (value){
            return !/^\s*$/.test(value);
        };

        return {
            isNumber: isNumber,
            isNotEmpty: isNotEmpty
        };
    }());

    var MyImage = function (src, width, height, align, captionImg, caption) {
        this.src = src;
        this.width = width;
        this.height = height;
        this.align = align;
        this.captionImg = captionImg;
        this.caption = caption;
    };
    MyImage.prototype.isValid = function () {
        return dataChecker.isNumber(this.width) &&
               dataChecker.isNumber(this.height) &&
               (!this.captionImg || dataChecker.isNotEmpty(this.caption));
    };
    MyImage.prototype.createHtml = function () {
        var html = '';
        var imgHtml = '<img src="' + this.src + '" width="' + this.width + '" height="' + this.height + '"/>';

        if (this.captionImg) {
            if (this.align === 'none') {    //有标题无对齐方式
                html = '<figure class="caption">' + imgHtml + '<figcaption>' + this.caption + '</figcaption></figure>';
            } else {    //有标题有对齐方式
                html = '<div style="text-align:' + this.align + '"><figure style="display:inline-block" class="caption">' +
                    imgHtml + '<figcaption>' + this.caption + '</figcaption></figure></div>';
            }
        } else {
            if (this.align === 'none') {    //无标题无对齐方式
                html = '<p>' + imgHtml + '</p>';
            } else {    //无标题有对齐方式
                html = '<p style="text-align:' + this.align + '">' + imgHtml + '</p>';
            }
        }

        return html;
    };


    function createImagesHtml(iframeDocument) {
        var $doc = $(iframeDocument);
        
        var $imageItems = $doc.find('.uploaded-image-item');

        //获取全部图片
        var images = [];
        $imageItems.each(function () {
            images.push(createImage($(this)));
        });

        //验证数据有效性
        var allValid = true;
        var html = '';

        $.each(images, function (i, v) {
            if (!v.isValid()) {
                allValid = false;
                return false;
            } else {
                html += v.createHtml();
            }
        });

        if (allValid) {
            return {
                valid: true,
                html: html
            };
        } else {
            return {
                valid: false
            };
        }
    }

    function createImage($item) {
        var src = $item.find('img').attr('src');
        var width = $item.find('.js-image-width').val();
        var height = $item.find('.js-image-height').val();
        var align = $item.find('.uploaded-image-align input:radio:checked').val();
        var $captionArea = $item.find('.uploaded-image-caption');
        var captionImg = $captionArea.find('input:checked').size() === 1;
        var caption = $captionArea.find('input:text').val();
        return new MyImage(src, width, height, align, captionImg, caption);
    }
    

    //imageupload插件弹出窗定义
    CKEDITOR.dialog.add('imageupload', function (editor) {
        //var imageuploadhtmlpath = editor.plugins.imageupload.path + 'imageupload.html';
        return {
            title: '添加本地图片',
            width: 610,
            height: 500,
            resizable: CKEDITOR.DIALOG_RESIZE_NONE,
            padding: 0,
            contents: [
                {
                    elements: [
                        {
                            type: "html",
                            html: "<iframe id='js_cke_image_upload' width='100%' height='100%' src='/Content/Scripts/components/ckeditor/plugins/imageupload/imageupload.html'></iframe>",
                            style: "width:100%;padding:0;margin:0;"
                        }
                    ]
                }
            ],
            onShow: function () {
                var $iframe = $('#js_cke_image_upload');

                $iframe.parent('.cke_dialog_ui_vbox_child').css('padding', '0').
                    parents('td.cke_dialog_contents_body').css('padding', '0');

                var $contentBody = $iframe.parents('td.cke_dialog_contents_body');
                var height = $contentBody.get(0).offsetHeight;

                $iframe.css('height', height + 'px');
            },
            onOk: function () {
                var result = createImagesHtml($('#js_cke_image_upload').get(0).contentDocument);
                if (result.valid) {
                    editor.insertHtml(result.html);
                } else {
                    alert('请确保数据完整有效!');
                    return false;
                }
            },
            //注意：onHide中使用return false无法阻止对话框关闭，如果同时使用onHide和onClose，onClose中的return false也将失效
            //onHide: function (evt) {
            //    return false;
            //    var iframe = $('#js_cke_image_upload').get(0);
            //    var iframeDocument = iframe.contentDocument;
            //    if ($(iframeDocument).find('.uploaded-image-item').size() > 0) {
            //        if (confirm('您已经上传了图片，关闭窗口将不能将已上传图片插入编辑器，是否继续关闭窗口？')) {
            //            evt.data.hide = false;
            //        } else {
            //            evt.data.hide = false;
            //        }
            //    } else {
            //        var iframeSrc = iframeDocument.location.href;
            //        iframe.src = iframeSrc;
            //    }
            //},
            onHide: function(){
                var iframe = $('#js_cke_image_upload').get(0);
                var iframeDocument = iframe.contentDocument;
                var iframeSrc = iframeDocument.location.href;
                iframe.src = iframeSrc;
            },
            onCancel: function () {
                var iframe = $('#js_cke_image_upload').get(0);
                var iframeDocument = iframe.contentDocument;
                if ($(iframeDocument).find('.uploaded-image-item').size() > 0) {
                    if (!confirm('您已经上传了图片，关闭窗口将不能将已上传图片插入编辑器，是否继续关闭窗口？')) {
                        evt.data.hide = false;
                    }
                }
                var iframeSrc = iframeDocument.location.href;
                iframe.src = iframeSrc;
            }
        };
    });

}());